<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义进度条</title>
    <link rel="stylesheet" href="demo.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

</head>
<body>
<nav>top title</nav>
<figure><!--//图像相关标签，删除对文档流不影响-->
    <figcaption>video demo</figcaption>

    <div class="player ">
        <video src="./mv/fun.mp4"  ></video>
        <div class="controls">
            <!--play pause-->
            <a href="#" class="play icon-play"></a>

            <div class="progress">
                <progress value="22" max="100"></progress>
            </div>
            <!--time-->
            <div class="time">
                <span>00:10:03</span>

            </div>
            <!--full screen-->
            <a href="#" class="full_screen icon-resize-full"></a>

        </div>
    </div>
</figure>

<div style="width: 360px ;height: 360px;background: pink;"></div>

</body>
</html>
<script>
    var device_width=document.documentElement.clientWidth;
    console.log("device==" + device_width);
    var play = document.querySelector('.play');
    var video = document.querySelector('video');
    play.onclick=function(){
        console.log("-====video.paused==="+video.paused);
        if(video.paused){
            video.play();
            this.classList.add('icon-pause');
            this.classList.remove('icon-play')
        }else{
            video.pause();
            this.classList.add('icon-play');
            this.classList.remove('icon-pause');
        }
    };

    var duration=0;
    video.oncanplay=function(){//当视频能够播放时调用
        //获取 视屏的总长度
         duration= video.duration;

        var h = Math.floor(duration / 3600);
        var m = Math.floor(duration % 3600 / 60);
        var s = Math.floor(duration % 60);

        h= h>=10?h:"0"+h;
        m= m>=10?m:"0"+m;
        s= s>=10?s:"0"+s;
        time_span.innerHTML=h+":"+m+":"+s;
        //@66320526
    };

    var time_span = document.querySelector(".time span");

    //当播放时间更新时候调用
    video.ontimeupdate=function(){
        var time=video.currentTime;//当前播放时间
       // console.log("current time=" + time);

        var h = Math.floor(time / 3600);
        var m = Math.floor(time % 3600 / 60);
        var s = Math.floor(time % 60);

        h= h>=10?h:"0"+h;
        m= m>=10?m:"0"+m;
        s= s>=10?s:"0"+s;
        time_span.innerHTML=h+":"+m+":"+s;

        var progress = document.querySelector(".controls .progress progress");
        progress.max=duration;
        progress.value=time;

       // console.log("duration==" + duration + ";;time==" + time);
    };


    document.querySelector(".controls .full_screen").onclick=function(){
        video.webkitRequestFullScreen();
    }




</script>